<template>
    <div  class="marLR20" style="padding-top: 20px;">
        <el-col :span="24">
            <e-button class="operatBtnBig" @click="submitPermission" style="margin-bottom: 5px;">保存权限</e-button>
            <el-table
                    :data="permissionList"
                    border
                    size="mini"
                    :span-method="arraySpanMethod"
                    style="width: 100%">
                <el-table-column
                        prop="full_menu"
                        label="菜单"
                        align="center"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="module"
                        label="模块"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        header-align="center"
                        label="权限">
                    <template slot-scope="scope">
                        <el-checkbox-group v-model="checked" @change="change">
                            <el-checkbox v-for="item in list[scope.row.module_id]['field']" :label="scope.row.id + '-'+ scope.row.module_id + '-' + item.id" :key="item.id">{{item.show_name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>

    </div>
</template>

<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    export default {
        /*name: "index"*/
        data(){
            return{
                spanArr: [],
                list: [],
                checked: [],
                permissionList: [],
            }
        },
        methods:{
            getList:function(){
                this.apiPost('admin/permission/index','').then(data=>{
                    if (data.code != 200){
                        _g.toastMsg('error',data.message);
                    }else{
                        this.permissionList = data.data;
                        this.list = data.list;
                        this.getSpanArr();
                        this.getMenuField();
                    }
                });
            },
            submitPermission:function(){
                if (this.checked.length > 0){
                    this.$confirm('是否确认保存权限?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(()=>{
                        let  data = {};
                        data.permission = this.checked;;
                        _g.showLoading('提交中');
                        this.apiPost('admin/permission/save',data).then(res=>{
                            _g.showLoading().close();
                            if (res.code != 200){
                                _g.toastMsg('error',res.message);
                            }else{
                                _g.toastMsg('success',res.message);
                            }
                        });
                    });
                } else{
                    _g.toastMsg('error','请选择字段权限');
                }
            },
            getSpanArr: function() {
                let data = this.permissionList;
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        this.spanArr.push(1);
                        this.pos = 0;
                    } else {
                        if (data[i].id === data[i - 1].id) {
                            this.spanArr[this.pos] += 1;
                            this.spanArr.push(0);
                        } else {
                            this.spanArr.push(1);
                            this.pos = i;
                        }
                    }
                }
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0){
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return [_row,_col];
                }
            },
            getMenuField:function(){
                this.apiPost('admin/permission/getMenuField','').then(res=>{
                    this.checked = res;
                });
            },
            change:function (value) {
                console.log(value);
            }
        },
        mounted:function () {
            this.getList();
        },
        mixins: [http]
    }
</script>

<style scoped>
.el-checkbox{
    margin-left: 4px;
    margin-right: 7px;
}
.el-checkbox__label{
    padding-left: 3px;
}
.operatBtnBig{
    display: inline-block;
    color: white;
    background-color: #f39c00;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    margin-right: 5px;
    padding: 0 8px;
}
.operatBtnMiddle{
    display: inline-block;
    color: white;
    background-color: #f39c00;
    width: 44px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    margin-right: 5px;
    padding: 0 8px;
}
.operatBtnMiddle:hover,.operatBtnBig:hover{
    background-color: #f5b466;
}
</style>